<template>
  <div id="examineParticulars" ref="examine_particulars" v-loading="tableLoading">
    <p class="title">推送详情</p>
    <div class="maincontainer" :style="{height: height}">
      <el-card class="box-card">
        <el-row>
          <el-col :span="6">
            <div class="msgWrap">
              <p style="font-size:18px">基本信息</p>
              <div class="con_tit">
                <el-row style="margin-bottom: 20px;margin-top: 20px">
                  <el-col :span="5" :offset="1">任务ID</el-col>
                  <el-col :span="16" :offset="1">{{ this.kapiandata.push_id }}</el-col>
                </el-row>
                <el-row style="margin-bottom: 20px">
                  <el-col :span="5" :offset="1">推送时间</el-col>
                  <el-col :span="16" :offset="1">{{ this.kapiandata.SendTime }}</el-col>
                </el-row>
                <el-row style="margin-bottom: 20px">
                  <el-col :span="5" :offset="1">推送目标</el-col>
                  <el-col :span="16" :offset="1"  v-show="this.kapiandata.Type === 1">{{ 'token单推' }}</el-col>
                  <el-col :span="16" :offset="1"  v-show="this.kapiandata.Type === 2">{{ '账号单推' }}</el-col>
                  <el-col :span="16" :offset="1"  v-show="this.kapiandata.Type === 3">{{ '全推' }}</el-col>
                  <el-col :span="16" :offset="1"  v-show="this.kapiandata.Type === 4">{{ '标签推' }}</el-col>
                  <el-col :span="16" :offset="1"  v-show="this.kapiandata.Type === 5 || this.kapiandata.Type === 6">{{ '号码包推' }}</el-col>
                </el-row>
                <el-row style="margin-bottom: 20px">
                  <el-col :span="5" :offset="1">推送平台</el-col>
                  <el-col :span="16" :offset="1">{{ this.v3platform }}</el-col>
                </el-row>
              </div>
            </div>
          </el-col>
          <el-col :span="10" :offset="1">
            <div class="msgWrap">
              <div class="msg-top">
                <p style="font-size:18px">推送内容</p>
                <div class="con_tit">
                  <el-row style="margin-bottom: 20px;margin-top: 20px">
                    <el-col :span="10" :offset="1">推送标题&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ this.titled }}</el-col>
                  </el-row>
                  <el-row style="margin-bottom: 20px">
                    <el-col :span="5" :offset="1">推送内容</el-col>
                    <el-col :span="16">{{ this.contained }}</el-col>
                  </el-row>
                </div>
              </div>
              <div class="con_tit">
                <p>高级设置</p>
                <div class="con_tit">
                  <el-row style="margin-top:20px">
                    <el-col :span="12">通知栏样式&nbsp;&nbsp;&nbsp;{{ this.builder_id === 1 ? '' : '无' }}</el-col>
                    <el-col :span="12" class="clearabledy">通知栏是否可清除&nbsp;&nbsp;&nbsp;{{ this.clearable === 1 ? '是' : '否' }}</el-col>
                  </el-row>
                  <el-row style="margin-top:20px">
                    <el-col :span="4">提醒方式</el-col>
                    <el-col :span="20">
                        <span class="ringdy">{{ this.ring === 1 ? '铃声' : ''}}</span>
                        <span class="vibratedy">{{ this.vibrate === 1 ? '震动' : ''}}</span>
                        <span class="lightsdy">{{ this.lights === 1 ? '呼吸灯' : '' }}</span>
                    </el-col>
                  </el-row>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="6" :offset="1">
            <p>推送下发进度</p>
            <div class="con_progress">
              <el-row>
                <el-col><el-progress type="circle" :percentage="Percentage" :stroke-width="12"></el-progress></el-col>
                <el-col>&nbsp;&nbsp;&nbsp;&nbsp;下发耗时 &nbsp;&nbsp;&nbsp;&nbsp; {{ this.lowerhair }}</el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>
      </el-card>
      <!-- 推送转化分析 -->
      <div class="funnecard">
          <div class="wang">
          <span class="wdcone"><i>{{ this.Perceone }}</i><img src="../../../../../src/images/jtou.jpg"></span>
          <span class="wdctwo"><i>{{ this.Percetwo }}</i><img src="../../../../../src/images/jtou.jpg"></span>
          <span class="wdcther"><i>{{ this.Percether }}</i><img src="../../../../../src/images/jtou.jpg"></span>
          <span class="wdcfour"><i>{{ this.Percefour }}</i><img src="../../../../../src/images/jtou.jpg"></span>
          </div>
            <el-card class="funnelfrts">
              <p>推送转化分析</p>
                <div class="funnelecharts">
                    <chart :options="funnel"></chart>
                </div>
            </el-card>
      </div>
      <!-- 时效分析 -->
      <div class="box-sacard" v-show="this.resresultList === 'flag'">
        <el-row :gutter="24">
          <!-- <el-col :span="6" style="padding-right:0px">
            <el-card class="boxactivcard">
              <p class="cardtitle">覆盖面分析</p>
              <div class="con_tit">
                <el-row :gutter="24">
                  <el-col :span="12" class="linebar">
                        <p class="activeone">当日活跃覆盖率</p>
                        <p class="activetwo">到达/当日DAU</p>
                  </el-col>
                  <el-col :span="12">
                      <span class="coverone">{{ dauone }}</span>
                  </el-col>
                </el-row>
              </div>
              <div class="con_tit">
                <el-row :gutter="24">
                  <el-col :span="12" class="linebar">
                        <p class="activeone">3日活跃覆盖率</p>
                        <p class="activetwo">到达/近3日DAU</p>
                  </el-col>
                  <el-col :span="12">
                      <span class="coverone">{{ dautwo }}</span>
                  </el-col>
                </el-row>
              </div>
            </el-card>
          </el-col> -->
          <el-col :span="24" class="echagfrts" style="padding-left:0px">
            <el-card>
              <p>推送时效分析</p>
                <div class="boxActive">
                  <el-button @click="butTimerone" :class="{actived:isActivedone}">1小时</el-button>
                  <el-button @click="butTimertwo" :class="{actived:isActivedtwo}" style="margin-left:-6px">24小时</el-button>
                </div>
                <div class="v-echarts echbar">
                    <chart :options="doubleline" style="width:800px"></chart>
                </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import api from '../../../../api/url'
import ajax from '../../../../api/ajax/mobilePushAjax'
import { mapGetters } from 'vuex'
let Base64 = require('js-base64').Base64
  export default {
    data () {
      return {
        tableLoading: true, // 加载过程
        channel: '', // 渠道选择
        kapiandata: {}, // 卡片的数据
        titled: '', // 标题格式化
        contained: '', // 内容格式化
        Percentage: 0, // 推送进度
        lowerhair: '', // 下发时间
     // dauone: '', // 当日活跃覆盖率
     // dautwo: '', // 3日活跃覆盖率
        builder_id: '', // 通知样式
        ring: '', // 声音
        clearable: '', // 通知栏是否可清除
        lights: '', // 呼吸灯
        vibrate: '', // 震动
        isActivedone: true, // 绑定的类名
        isActivedtwo: false, // 绑定的类名
        intvalbar: '', // 时间控制器
        Perceone: '', // 推送数据百分率1
        Percetwo: '', // 推送数据百分率2
        Percether: '', // 推送数据百分率3
        Percefour: '', // 推送数据百分率4
        intval: 1, // 时间颗粒
        darsf: '', // 接收参数
        dataX1: ['0分钟', '1分钟', '2分钟', '3分钟', '4分钟', '5分钟', '6分钟', '7分钟', '8分钟', '9分钟', '10分钟', '11分钟', '12分钟', '13分钟', '14分钟', '15分钟', '16分钟', '17分钟', '18分钟', '19分钟', '20分钟', '21分钟', '22分钟', '23分钟', '24分钟', '25分钟', '26分钟', '27分钟', '28分钟', '29分钟', '30分钟', '31分钟', '32分钟', '33分钟', '34分钟', '35分钟', '36分钟', '37分钟', '38分钟', '39分钟', '40分钟', '41分钟', '42分钟', '43分钟', '44分钟', '45分钟', '46分钟', '47分钟', '48分钟', '49分钟', '50分钟', '51分钟', '52分钟', '53分钟', '54分钟', '55分钟', '56分钟', '57分钟', '58分钟', '59分钟'],
        dataX2: ['0小时', '1小时', '2小时', '3小时', '4小时', '5小时', '6小时', '7小时', '8小时', '9小时', '10小时', '11小时', '12小时', '13小时', '14小时', '15小时', '16小时', '17小时', '18小时', '19小时', '20小时', '21小时', '22小时', '23小时'],
      funnel: {
          color: ['#3398DB'],
          tooltip: {
              trigger: 'axis',
              axisPointer: { // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
              }
          },
          grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
          },
          xAxis: [
              {
                  type: 'category',
                  data: ['计划发送', '设备在线', '到达设备', '展示', '点击'],
                  axisTick: {
                      alignWithLabel: true
                  }
              }
          ],
          yAxis: [
              {
                  type: 'value'
              }
          ],
          series: [
              {
                  name: '总量',
                  type: 'bar',
                  barWidth: '50%',
                  data: []
              }
          ]
      },
        height: null,
      doubleline: {
              title: {
                  text: ''
              },
              tooltip: {
                  trigger: 'axis'
              },
              legend: {
                  data: ['计划发送', '设备在线', '到达设备', '展示', '点击']
              },
              grid: {
                  left: '3%',
                  right: '4%',
                  bottom: '3%',
                  containLabel: true
              },
              toolbox: {
                  feature: {
                      saveAsImage: {}
                  }
              },
              xAxis: {
                  type: 'category',
                  boundaryGap: false,
                  data: []
              },
              yAxis: {
                  type: 'value'
              },
              series: [
                  {
                      name: '计划发送',
                      type: 'line',
                      stack: '总量',
                      data: []
                  },
                  {
                      name: '设备在线',
                      type: 'line',
                      stack: '总量',
                      data: []
                  },
                  {
                      name: '到达设备',
                      type: 'line',
                      stack: '总量',
                      data: []
                  },
                  {
                      name: '展示',
                      type: 'line',
                      stack: '总量',
                      data: []
                  },
                  {
                      name: '点击',
                      type: 'line',
                      stack: '总量',
                      data: []
                  }
              ]
          }
      }
    },
    computed: {
      ...mapGetters(['v3AppKey', 'v3SecretKey', 'v3platform', 'v3AppId', 'resresultList', 'pushmsgId'])
    },
    methods: {
      // 1小时触发
      butTimerone () {
         this.isActivedone = true
         this.isActivedtwo = false
         this.intval = 1
         this.doubleline.xAxis.data = this.dataX1
         this.doubleline.series[0].data = []
         this.doubleline.series[1].data = []
         this.doubleline.series[2].data = []
         this.doubleline.series[3].data = []
         this.doubleline.series[4].data = []
         let Baseencode = Base64.encode(this.v3AppKey + ':' + this.v3SecretKey)
         let itData = {
            Authorization: 'Basic' + ' ' + Baseencode,
            'Content-Type': 'application/json'
                }
             let hourData = {
                push_id: [this.pushmsgId],
                operation: 2,
                query_type: 1,
                source: 'all',
                intval: this.intval
                    }
             ajax.post(api.GET_PUSH_STATUS_APP, hourData, itData).then(res => {
               let respushHour = res.result.pushHourData
               for (let key in respushHour) {
                 if (key !== '-1-1') {
                    this.doubleline.series[0].data.push(respushHour[key].push_active)
                    this.doubleline.series[1].data.push(respushHour[key].push_online)
                    this.doubleline.series[2].data.push(respushHour[key].verify_svc)
                    this.doubleline.series[3].data.push(respushHour[key].verify)
                    this.doubleline.series[4].data.push(respushHour[key].click)
                      }
                  }
            })
          },
      // 24小时触发
      butTimertwo () {
        this.isActivedtwo = true
        this.isActivedone = false
        this.intval = 60
        this.doubleline.xAxis.data = this.dataX2
        this.doubleline.series[0].data = []
        this.doubleline.series[1].data = []
        this.doubleline.series[2].data = []
        this.doubleline.series[3].data = []
        this.doubleline.series[4].data = []
        let Baseencode = Base64.encode(this.v3AppKey + ':' + this.v3SecretKey)
        let itData = {
            Authorization: 'Basic' + ' ' + Baseencode,
            'Content-Type': 'application/json'
              }
             let hourData = {
                push_id: [this.pushmsgId],
                operation: 2,
                query_type: 1,
                source: 'all',
                intval: this.intval
                }
             ajax.post(api.GET_PUSH_STATUS_APP, hourData, itData).then(res => {
               let respushHour = res.result.pushHourData
               for (let key in respushHour) {
                 if (key !== '-1-1') {
                    this.doubleline.series[0].data.push(respushHour[key].push_active)
                    this.doubleline.series[1].data.push(respushHour[key].push_online)
                    this.doubleline.series[2].data.push(respushHour[key].verify_svc)
                    this.doubleline.series[3].data.push(respushHour[key].verify)
                    this.doubleline.series[4].data.push(respushHour[key].click)
                      }
                }
            })
          }
    },
    created () {
      this.$nextTick(() => {
        this.height = this.$refs.examine_particulars.offsetHeight - 60 + 'px'
    })
        let Baseencode = Base64.encode(this.v3AppKey + ':' + this.v3SecretKey)
        let itData = {
            Authorization: 'Basic' + ' ' + Baseencode,
            'Content-Type': 'application/json'
        }
        this.doubleline.xAxis.data = this.dataX1 // 进来横轴的时间
        this.doubleline.series[0].data = []
        this.doubleline.series[1].data = []
        this.doubleline.series[2].data = []
        this.doubleline.series[3].data = []
        this.doubleline.series[4].data = []
    if (this.resresultList === 'flag') {
                let seeDeld = {
                push_id: [this.pushmsgId],
                operation: 1,
                query_type: 1,
                source: 'all'
            }
        ajax.post(api.GET_PUSH_STATUS_APP, seeDeld, itData).then(res => {
                    this.kapiandata = res.result.list[0]
                    this.titled = JSON.parse(this.kapiandata.Content).title
                    this.builder_id = JSON.parse(this.kapiandata.Content).builder_id
                    this.ring = JSON.parse(this.kapiandata.Content).ring
                    this.vibrate = JSON.parse(this.kapiandata.Content).vibrate
                    this.lights = JSON.parse(this.kapiandata.Content).lights
                    this.clearable = JSON.parse(this.kapiandata.Content).clearable
                    this.contained = JSON.parse(this.kapiandata.Content).content
                    this.funnel.series[0].data = [this.kapiandata.push_active, this.kapiandata.push_online, this.kapiandata.verify_svc, this.kapiandata.verify, this.kapiandata.click]
                    if (this.kapiandata.push_online === 0 || this.kapiandata.push_active === 0) {
                          this.Perceone = 0 + '%'
                        } else {
                      this.Perceone = parseInt((this.kapiandata.push_online / this.kapiandata.push_active) * 100) + '%'
                        }
                    if (this.kapiandata.verify_svc === 0 || this.kapiandata.push_online === 0) {
                      this.Percetwo = 0 + '%'
                        } else {
                      this.Percetwo = parseInt((this.kapiandata.verify_svc / this.kapiandata.push_online) * 100) + '%'
                        }
                    if (this.kapiandata.verify === 0 || this.kapiandata.verify_svc === 0) {
                      this.Percether = 0 + '%'
                        } else {
                          this.Percether = parseInt((this.kapiandata.verify / this.kapiandata.verify_svc) * 100) + '%'
                        }
                    if (this.kapiandata.click === 0 || this.kapiandata.verify === 0) {
                      this.Percefour = 0 + '%'
                        } else {
                          this.Percefour = parseInt((this.kapiandata.click / this.kapiandata.verify) * 100) + '%'
                        }
                        // this.dauone = parseInt((this.kapiandata.verify_svc / this.kapiandata.dauCoverCurrentDay) * 100) + '.0%' === 'NaN.0%' ? '0%' : this.dauone
                        // this.dautwo = parseInt((this.kapiandata.verify_svc / this.kapiandata.dauCoverLast3Day) * 100) + '.0%' === 'NaN.0%' ? '0%' : this.dautwo
                        let startDate = this.kapiandata.SendTime
                            startDate = startDate.replace(new RegExp('-', 'gm'), '/')
                        let lowerhairbar = (new Date(startDate)).getTime() / 1000 // 得到秒数
                    if (this.kapiandata.pushCostTs === 0) {
                        this.lowerhair = 0 + '秒钟'
                        } else {
                          this.lowerhair = parseInt(this.kapiandata.pushCostTs - lowerhairbar) > 60 ? (parseInt(this.kapiandata.pushCostTs - lowerhairbar) / 60).toFixed(1) + '分钟' : parseInt(this.kapiandata.pushCostTs - lowerhairbar) + '秒钟'
                        }
        })
            let schedule = {
                push_id: [this.pushmsgId],
                operation: 7,
                query_type: 1,
                source: 'all'
              }
        ajax.post(api.GET_PUSH_STATUS_APP, schedule, itData).then(res => {
                   let hasnumber = res.result.list[0].hasPushTokenNum
                   let totnumber = res.result.list[0].totalPushTokenNum
                   if (hasnumber === 0 || totnumber === 0) {
                     this.Percentage = 0
                      } else {
                     this.Percentage = parseInt(hasnumber / totnumber) * 100
                    }
      })
             let hourData = {
                push_id: [this.pushmsgId],
                operation: 2,
                query_type: 1,
                source: 'all',
                intval: this.intval
              }
             ajax.post(api.GET_PUSH_STATUS_APP, hourData, itData).then(res => {
               let respushHour = res.result.pushHourData
               for (let key in respushHour) {
                 if (key === '-1-1') {
                       delete respushHour[key]
                    } else {
                  this.doubleline.series[0].data.push(respushHour[key].push_active)
                  this.doubleline.series[1].data.push(respushHour[key].push_online)
                  this.doubleline.series[2].data.push(respushHour[key].verify_svc)
                  this.doubleline.series[3].data.push(respushHour[key].verify)
                  this.doubleline.series[4].data.push(respushHour[key].click)
                    }
              }
          })
      } else {
                let seeDeld = {
                push_id: [this.pushmsgId],
                operation: 1,
                query_type: 1,
                source: 'all'
                  }
            ajax.post(api.GET_PUSH_STATUS_SINGLE, seeDeld, itData).then(res => {
                    this.kapiandata = res.result.list[0]
                    this.titled = JSON.parse(this.kapiandata.Content).title
                    this.contained = JSON.parse(this.kapiandata.Content).content
                    this.funnel.series[0].data = [this.kapiandata.push_active, this.kapiandata.push_online, this.kapiandata.verify_svc, this.kapiandata.verify, this.kapiandata.click]
                    if (this.kapiandata.push_online === 0 || this.kapiandata.push_active === 0) {
                          this.Perceone = 0 + '%'
                    } else {
                      this.Perceone = parseInt((this.kapiandata.push_online / this.kapiandata.push_active) * 100) + '%'
                    }
                    if (this.kapiandata.verify_svc === 0 || this.kapiandata.push_online === 0) {
                      this.Percetwo = 0 + '%'
                    } else {
                      this.Percetwo = parseInt((this.kapiandata.verify_svc / this.kapiandata.push_online) * 100) + '%'
                    }
                    if (this.kapiandata.verify === 0 || this.kapiandata.verify_svc === 0) {
                      this.Percether = 0 + '%'
                    } else {
                      this.Percether = parseInt((this.kapiandata.verify / this.kapiandata.verify_svc) * 100) + '%'
                    }
                    if (this.kapiandata.click === 0 || this.kapiandata.verify === 0) {
                      this.Percefour = 0 + '%'
                    } else {
                      this.Percefour = parseInt((this.kapiandata.click / this.kapiandata.verify) * 100) + '%'
                    }
                    // this.dauone = parseInt((this.kapiandata.verify_svc / this.kapiandata.dauCoverCurrentDay) * 100) + '.0%' === 'NaN.0%' ? '0%' : this.dauone
                    // this.dautwo = parseInt((this.kapiandata.verify_svc / this.kapiandata.dauCoverLast3Day) * 100) + '.0%' === 'NaN.0%' ? '0%' : this.dautwo
                    let startDate = this.kapiandata.SendTime
                        startDate = startDate.replace(new RegExp('-', 'gm'), '/')
                    let lowerhairbar = (new Date(startDate)).getTime() / 1000 // 得到秒数
                    if (this.kapiandata.pushCostTs === 0) {
                        this.lowerhair = 0 + '秒钟'
                    } else {
                      this.lowerhair = parseInt(this.kapiandata.pushCostTs - lowerhairbar) > 60 ? (parseInt(this.kapiandata.pushCostTs - lowerhairbar) / 60).toFixed(1) + '分钟' : parseInt(this.kapiandata.pushCostTs - lowerhairbar) + '秒钟'
                    }
          })
            let schedule = {
                push_id: [this.pushmsgId],
                operation: 7,
                query_type: 1,
                source: 'all'
        }
            ajax.post(api.GET_PUSH_STATUS_SINGLE, schedule, itData).then(res => {
                   let hasnumber = res.result.list[0].hasPushTokenNum
                   let totnumber = res.result.list[0].totalPushTokenNum
                   if (hasnumber === 0 || totnumber === 0) {
                     this.Percentage = 0
                   } else {
                     this.Percentage = parseInt(hasnumber / totnumber) * 100
                   }
        })
             let hourData = {
                push_id: [this.pushmsgId],
                operation: 2,
                query_type: 1,
                source: 'all',
                intval: this.intval
            }
             ajax.post(api.GET_PUSH_STATUS_APP, hourData, itData).then(res => {
               let respushHour = res.result.pushHourData
               for (let key in respushHour) {
                 if (key !== '-1-1') {
                    this.doubleline.series[0].data.push(respushHour[key].push_active)
                    this.doubleline.series[1].data.push(respushHour[key].push_online)
                    this.doubleline.series[2].data.push(respushHour[key].verify_svc)
                    this.doubleline.series[3].data.push(respushHour[key].verify)
                    this.doubleline.series[4].data.push(respushHour[key].click)
                 }
                  }
        })
      }
          this.tableLoading = false
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  #examineParticulars
    height 100%
    background #f5f5f5
    overflow hidden
    .title
      height 60px
      padding 15px
      line-height 30px
      font-size 18px
      font-weight normal
      background #fff
    .maincontainer
      height: 100%
      width: 100%
      background-color: #ffff
      height calc(100% - 70px)
      overflow: auto
      overflow-x hidden
      .box-card
        margin-top 10px
        .msgWrap
          width 100%
          height 260px
          border-right 1px dashed #d7d7d7
          .msg-top
            width 412px
            padding-bottom 10px
            border-bottom 1px dashed #d7d7d7
        p
          font-size 16px
        .con_tit
          margin-top 10px
        .con_progress
          margin 30px 0 0 40px
      .funnecard
        width 100%
        position relative
      .wang
        height 390px
        width 600px
        position absolute
        top 20px
        left 220px
        .wdcone>i
          position absolute
          top 230px
          left 30%
          font-size 12px
        .wdcone>img
          position absolute
          left 180px
          bottom 115px
          width 40px
          height 20px
        .wdctwo>i
          position absolute
          left 48%
          top 230px
          font-size 12px
        .wdctwo>img
          position absolute
          left 287px
          bottom 115px
          width 40px
          height 20px
        .wdcther>i
          position absolute
          top 230px
          left 66%
          font-size 12px
        .wdcther>img
          position absolute
          left 394px
          bottom 115px
          width 40px
          height 20px
        .wdcfour>i
          position absolute
          top 230px
          left 85%
          font-size 12px
        .wdcfour>img
          position absolute
          left 501px
          bottom 115px
          width 40px
          height 20px
      .funnelfrts
        height 450px
        .funnelfrts>p
          margin-top 15px
          font-size 18px
        .funnelecharts
          padding-left 20%
      .box-sacard
        .boxactivcard
          height 516px
        .cardtitle
          margin-top 15px
          font-size 18px
        .con_tit
          height 50px
          margin 38% auto
          .linebar
            border-right 1px solid #c1c1c1
            .activeone
              width 100%
              font-size 14px
              font-weight 700
              text-align center
              line-height 25px
            .activetwo
              width 100%
              text-align center
          .coverone
            width 100%
            height 50px
            font-size 30px
            font-weight 700
            color #5cd07f
            text-align center
        .echagfrts
          height 400px
          .echagfrts>p
            margin-top 15px
            font-size 18px
          .boxActive
            margin-top 15px
            .actived
              background #08b1ff
              text-align center
              color #fff
          .v-echarts.echbar
            padding-left 50%
            margin-left -400px
</style>
